<template>
  <div class="orderContent flex flex_column">
    <div class="tagList">
      <div class="fileTable">
        <div class="border lastTdNoBorder">
          <el-table
            :data="intelligenceList"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              prop="backMaterialBillNo"
              label="退料编号"
              min-width="100"
            />
            <el-table-column
              prop="createDate"
              label="退料时间"
              min-width="100"
            />

            <el-table-column
              prop="backMaterialTypeName"
              label="退料类型"
              min-width="100"
            />

            <el-table-column
              prop="saleOrderNo"
              label="关联订单"
              min-width="100"
            />
            <el-table-column
              prop="backMaterialKindCount"
              label="退料明细"
              min-width="100"
            />
            <el-table-column
              prop="createPersonName"
              label="退料人员"
              min-width="100"
            />
            <el-table-column
              prop="backMaterialRemark"
              label="备注"
              min-width="100"
            >
              <template scope="{row}">
                {{ row.backMaterialRemark || '--' }}
              </template>
            </el-table-column>

            <el-table-column label="操作" min-width="70">
              <template slot-scope="scope">
                <div>
                  <el-popover
                    :ref="`popover-${scope.$index}`"
                    placement="bottom-end"
                    popper-class="tableOp"
                    width="160"
                    :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                    trigger="click"
                  >
                    <div class="operation">
                      <ul>
                        <li @click="handleClick(scope.row)">查看</li>
                      </ul>
                    </div>
                    <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      :title="'查看'"
      :visible.sync="isAddProduct"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
      @open="openCp"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">入库单号：</span>{{ ProductForm.backMaterialBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ ProductForm.createDate || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ ProductForm.createPersonName }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            ref="ProductForm"
            :model="ProductForm"
            :rules="rules"
            label-width="110px"
            label-position="left"
            class="dialogForm dialogInlineForm"
            :disabled="canDiable"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="退料类型" prop="purchaseType">
                  <el-input v-model="ProductForm.backMaterialTypeName" placeholder="生产退料" size="mini" disabled />
                  <!-- <el-select
                        filterable v-model="ProductForm.getMaterialType" placeholder="领料类型" size="mini">
                    <el-option
                      v-for="item in purchaseTypes"
                      :key="item.dicValueID"
                      :label="item.dicValueDesc"
                      :value="item.dicValueCode"
                    />
                  </el-select> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <div class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="ProductForm.getMaterialBillNo" placeholder="选择生产单" size="mini" disabled />
                    </div>
                    <div class="ml10 ">
                      <!-- <selectProductOrder /> -->
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="退料人员" prop="backMaterialPersonName">
                  <div class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="ProductForm.backMaterialPersonName" size="mini" placeholder="请选择人员">
                        <el-button slot="append" icon="el-icon-user" @click="isperShow=true" />
                      </el-input>
                    </div>
                  </div></el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="退料机台" prop="equipmentNo">
                  <!-- <el-select
                        filterable v-model="ProductForm.equipmentNo" placeholder="领料设备" size="mini" @change="supplierChange">
                    <el-option
                      v-for="item in equipmentList"
                      :key="item.equipmentNo"
                      :label="item.equipmentName"
                      :value="item.equipmentNo"
                    />
                  </el-select> -->
                  <el-input v-model="ProductForm.equipmentName" placeholder="退料设备" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="退料备注" class="inlineText">
              <el-input v-model="ProductForm.backMaterialRemark" type="textarea" :rows="1" placeholder="退料备注" size="mini" clearable />
            </el-form-item>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">退料明细</span>
              <span v-if="!canDiable" class="c_3F61F1 mr15 pointer" @click="isSemidialog = true"><i class="el-icon-plus mr5" /> 新增</span>
            </div>
            <div ref="bigdialogTable" class="bigdialogTbCon">
              <el-table
                :data="ProductForm.mxDataList"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="stockGoodsCode"
                  label="物料编号"
                  width="120"
                />
                <el-table-column
                  label="物料类型"
                  prop="goodsCategoryName"
                  show-overflow-tooltip
                  min-width="100"
                />
                <el-table-column
                  label="供应商"
                  prop="supplierName"
                  show-overflow-tooltip
                  min-width="100"
                />
                <el-table-column
                  label="物料名称"
                  prop="goodsName"
                  min-width="100"
                />
                <el-table-column
                  label="规格型号"
                  prop="stockGoodsName"
                  min-width="100"
                />
                <el-table-column
                  label="退料数量"
                  prop="backQuantity	"
                  show-overflow-tooltip
                  min-width="90"
                >         <template slot-scope="{row}">
                  <el-input
                    v-model="row.backQuantity"
                    :disabled="canDiable"
                    placeholder="请输入"
                    size="mini"
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                </template>
                </el-table-column>
                <el-table-column
                  label="单位"
                  prop="goodsUnitName"
                  min-width="80"
                />
                <el-table-column
                  label="备注"
                  show-overflow-tooltip
                  min-width="150"
                  prop="backRemark"
                >
                  <template slot-scope="{row}">
                    <el-input v-model="row.backRemark" :disabled="canDiable" placeholder="请输入" size="mini" />
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="!canDiable"
                  label="操作"
                  fixed="right"
                  show-overflow-tooltip
                  min-width="80"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="删除" placement="right-start">
                      <span class="pointer" @click="purchaseDelete(scope.$index)"><i class="el-icon-delete" /></span>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddProduct=false">取 消</el-button>
        <!-- 新增       -->

      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatbytes } from '@/utils'

export default {
  name: '',
  props: {
    orderNo: {
      type: String
    }
  },
  data() {
    return {
      pickType: '1', //,
      intelligenceList: [],
      name: '',
      addProductLoading: false,
      isAddProduct: false,
      ops: 1,
      rules: {},
      opsid: 1,
      saleOrderNo: null,
      canDiable: false,
      ProductForm: {},
      equipmentList: [],
      packageGuiGeType: 1
    }
  },
  created() {
    this.saleOrderNo = this.$route.query.saleOrderNo
    this.getList()
  },
  mounted() {
  },
  methods: {

    handleClick(row) {
      this.opsid = 2
      this.canDiable = true
      this.getDetail(row)
    },
    openCp() {
      const _data = {
        getMaterialBillNo: this.ProductForm.getMaterialBillNo,
        likeWords: ''
      }
      this.$api.product.GetProduceTaskEquipmentList(_data).then((res) => {
        this.equipmentList = res
        if (res && res.length) {
          this.ProductForm.equipmentNo = res[0].equipmentNo
        }
      })
    },
    closeDialog() {
      if (this.$refs.ProductForm) {
        this.$refs.ProductForm.resetFields()
      }
      this.ProductForm = this.$options.data().ProductForm
    },
    getDetail(row) {
      const _data = {
        backMaterialID: row.backMaterialID,
        backMaterialBillNo: row.backMaterialBillNo
      }
      this.$api.product.GetBackProduceMaterialBillDetail(_data).then((res) => {
        this.equipmentList.push({
          equipmentName: res.equipmentName,
          equipmentNo: res.equipmentNo
        })
        this.ProductForm = res.baseData
        this.ProductForm.mxDataList = res.mxDataList
        this.isAddProduct = true
      })
    },
    getList() {
      const parmas = {
        saleOrderNo: this.saleOrderNo ? this.saleOrderNo : this.orderNo
      }
      this.$api.product.GetBackProduceMaterialBillsForOrder(parmas).then((res) => {
        this.intelligenceList = res
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="scss" scoped>
.orderContent {
  width: 100%;
  flex: 1;
}
.tagList {
  // box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  // border: 1px solid #E6E6E6;
  margin-bottom: 16px;
  width: 100%;
  .type {
    margin: 16px 10px;
  }
  .listNav {
    height: 44px;
    padding: 0 14px;
    background: #f5f6f9;
    border-bottom: 1px solid #E6E6E6;
  }
  .fileTable{
    padding: 10px;
    .border{
      border: solid #EBEEF5;
      border-width: 0 1px 0 1px;
    }
  }
}
.container {
  height: 100%;
}
.permangeRg {
  border: 1px solid #e6e6e6;
  background: #fff;
  height: 100%;


  .mainTT {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 18px 16px;
    padding-bottom: 0;
  }
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}
</style>
